<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web3项目管理工具 - 测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            min-height: 100vh;
        }
        .container {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        h1 {
            color: #409eff;
            text-align: center;
            margin-bottom: 30px;
        }
        .status {
            background: #f0f9ff;
            border: 1px solid #409eff;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }
        .success {
            background: #f0f9f0;
            border-color: #67c23a;
        }
        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }
        .info-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
        }
        .label {
            font-weight: bold;
            color: #606266;
        }
        .value {
            color: #303133;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎉 Web3项目管理工具</h1>

        <div class="status success">
            <h3>✅ 开发环境就绪</h3>
            <p>恭喜！您的Web3项目管理工具开发环境已经成功配置完成。</p>
        </div>

        <div class="info-grid">
            <div class="info-item">
                <div class="label">🌐 前端开发服务器</div>
                <div class="value">http://localhost:3000</div>
            </div>
            <div class="info-item">
                <div class="label">🔧 后端API地址</div>
                <div class="value">http://localhost:8080</div>
            </div>
            <div class="info-item">
                <div class="label">📊 MySQL数据库</div>
                <div class="value">localhost:3306</div>
            </div>
            <div class="info-item">
                <div class="label">🎛️ PhpMyAdmin</div>
                <div class="value">http://localhost:8081</div>
            </div>
        </div>

        <div class="status">
            <h3>🚀 下一步操作</h3>
            <ol>
                <li><strong>在IDEA中导入后端项目</strong>：打开 backend 目录</li>
                <li><strong>配置JDK8环境</strong>：Project Structure → SDK → 1.8</li>
                <li><strong>启动Spring Boot</strong>：运行 Web3ManagementApplication</li>
                <li><strong>访问应用</strong>：前端Vue应用将在后端启动后正常工作</li>
            </ol>
        </div>

        <div class="status">
            <h3>🎯 核心功能</h3>
            <ul>
                <li>✅ 账号独立配置管理</li>
                <li>✅ 配置继承机制</li>
                <li>✅ 可视化配置编辑</li>
                <li>✅ 配置历史追踪</li>
                <li>✅ JWT认证安全</li>
            </ul>
        </div>

        <div class="status">
            <h3>📋 数据库连接信息</h3>
            <p><strong>Host:</strong> localhost<br>
            <strong>Port:</strong> 3306<br>
            <strong>Database:</strong> web3_management<br>
            <strong>Username:</strong> web3user<br>
            <strong>Password:</strong> web3pass</p>
        </div>

        <p style="text-align: center; margin-top: 30px; color: #909399;">
            <small>Web3项目管理工具 v2.0.0 - Docker + JDK8兼容版本</small>
        </p>
    </div>

    <script>
        console.log('Web3项目管理工具测试页面加载成功');

        // 检查各服务状态
        setTimeout(() => {
            fetch('http://localhost:8080/actuator/health')
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'UP') {
                        console.log('✅ 后端服务正常');
                        document.body.insertAdjacentHTML('beforeend',
                            '<div style="position:fixed;top:20px;right:20px;background:#67c23a;color:white;padding:10px;border-radius:4px;">后端服务已启动</div>'
                        );
                    }
                })
                .catch(error => {
                    console.log('⏳ 后端服务尚未启动，请在IDEA中启动Spring Boot应用');
                });
        }, 1000);
    </script>
</body>
</html>